<template>
  <layout :showBg="false">
    <template #header>
      <view class="page-head flex flex-a-c">
        <image
          src="../../../assets/images/icons/arrow-right.png"
          class="arrow-left back"
          style="width: 48rpx; height: 48rpx; opacity: 0.9"
          mode="scaleToFill"
          @click="back"
        />
        <text class="fs-36 bold">个人信息</text>
      </view>
    </template>
    <view class="content">
      <!-- 头像  @click="showPic=true"-->
      <view @click="onShowPic" class="setting-item flex flex-bt">
        <view class="flex flex-a">
          <text class="fs-28 c-90">头像</text>
        </view>
        <view class="flex flex-a">
          <image
            :src="userInfo.avatar || require('../../../assets/images/logo.png')"
            style="width: 80rpx; height: 80rpx; border-radius: 50%"
            mode="scaleToFill"
          />
          <image
            src="../../../assets/images/icons/arrow-right.png"
            style="width: 32rpx; height: 32rpx"
            mode="scaleToFill"
            class="right-icon"
          />
        </view>
      </view>
      <!-- 昵称 -->
      <view
        @click="jump('/pages/mine/setting/changeNickname')"
        class="setting-item flex flex-bt"
      >
        <view class="flex flex-a">
          <text class="fs-28 c-90">昵称</text>
        </view>
        <view class="flex flex-a">
          <text class="fs-28 c-60">{{ userInfo.nickName }}</text>
          <image
            src="../../../assets/images/icons/arrow-right.png"
            style="width: 32rpx; height: 32rpx"
            mode="scaleToFill"
            class="right-icon"
          />
        </view>
      </view>
      <!-- id -->
      <view class="setting-item flex flex-bt">
        <view class="flex flex-a">
          <text class="fs-28 c-90">ID</text>
        </view>
        <view class="flex flex-a">
          <image
            src="../../../assets/images/setting/copy.png"
            style="width: 32rpx; height: 32rpx; margin-right: 16rpx"
            mode="scaleToFill"
            @click="copyText(userInfo.userId)"
          />
          <text class="fs-28 c-60">{{ userInfo.userId }}</text>
        </view>
      </view>
      <!-- 邀请码 -->
      <view class="setting-item flex flex-bt">
        <view class="flex flex-a">
          <text class="fs-28 c-90">邀请码</text>
        </view>
        <view class="flex flex-a">
          <image
            src="../../../assets/images/setting/copy.png"
            style="width: 32rpx; height: 32rpx; margin-right: 16rpx"
            mode="scaleToFill"
            @click="copyText(userInfo.inviteCode)"
          />
          <text class="fs-28 c-60">{{ userInfo.inviteCode }}</text>
        </view>
      </view>
    </view>
    <u-popup round="32rpx" :show="showPic" @close="showPic = false">
      <view class="f-content">
        <view
          @click="choosePic('camera')"
          class="f-item flex flex-a-c c-90 fs-32"
          >拍照</view
        >
        <view
          @click="choosePic('album')"
          class="f-item flex flex-a-c c-90 fs-32"
          >相册选择</view
        >
        <view @click="onPreview" class="f-item flex flex-a-c c-90 fs-32 preview"
          >查看头像</view
        >
        <view class="f-item flex flex-a-c c-60 fs-32" @click="showPic = false"
          >取消</view
        >
      </view>
    </u-popup>
  </layout>
</template>
<script>
import layout from "../../../compennts/layout/index.vue";
import { getLocalUserInfo } from "../../../assets/utils/index";
import { copyText } from "../../../assets/utils";
import { getHsyToken } from "../../../api/plugins/index";
import { updateProfile } from "../../../api/setting/index";
import { formatDate } from "../../../assets/utils/date";
import { randomString } from "../../../assets/utils/index";
import { uploadFile } from "../../../api/mine/index";

import "../../../assets/utils/tos.min.js";
export default {
  components: {
    layout,
  },
  data() {
    return {
      userInfo: {},
      showPic: false,
    };
  },
  onShow() {
    this.userInfo = getLocalUserInfo();
    console.log('----,',this.userInfo)
  },
  onLoad() {},
  methods: {
    copyText,
    back() {
      uni.navigateBack();
    },
    jump(path) {
      uni.navigateTo({
        url: path,
      });
    },
    onPreview() {
      uni.previewImage({
        urls: [
          this.userInfo.avatar || require("../../../assets/images/logo.png"),
        ],
      });
    },
    onShowPic(){
      let systemType = uni.getSystemInfoSync().platform;
      console.log(systemType)
      if(systemType == 'ios') return
      this.showPic = true
    },
    choosePic(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ["compressed"],
        sourceType: [type],
        extension: ["jpg", "png"],
        success: async (res) => {
          this.handleUpload(res, type);
        },
        fail: (res) => {
          console.log(res);
        },
      });
    },
    async initTOS() {
      return new Promise(async (resolve, reject) => {
        const { data } = await getHsyToken();
        const { AccessKeyId, SessionToken, SecretAccessKey } =
          data.Result.Credentials;
        this.client = new TOS({
          accessKeyId: AccessKeyId, // 临时密钥的 Access Key
          accessKeySecret: SecretAccessKey, // 临时密钥的 Secret Key
          stsToken: SessionToken, //从 STS 服务获取的安全令牌
          region: "cn-beijing", // 所在地域
          bucket: "cps-oss-public", //Bucket 名称。
        });
        resolve();
      });
    },
    // TODO: 拍照额外处理
    async handleUpload(res, type) {
      let file = res.tempFilePaths[0];
      let fileName = file.split("/").pop();
      if (type == "camera") {
        plus.zip.compressImage(
          {
            src: file,
            dst: fileName,
            overwrite: true,
            width: "1920px",
            height: "1080px",
            format: "jpg",
            quality: 100,
          },
          (e) => {
            file = e.target;
            this._upload(file, fileName);
          }
        );
      } else {
        this._upload(file, fileName);
      }
    },
    _upload(file, fileName) {
      let date = formatDate(new Date()).split(" ")[0];
      var fileReader = new plus.io.FileReader();
      fileReader.readAsDataURL(file);

      fileReader.onloadend = async (e) => {
        let pic = e.target.result.split(",")[1];
        let key = `${date}/${randomString(5)}_${fileName}`;
        // return
        uploadFile({
          key: key,
          base64: pic,
        })
          .then((res) => {
            let path = `https://cps-oss-public.tos-cn-beijing.volces.com/${res.data}`;
            this.onUploadAvatart(path);
          })
          .catch((err) => {
            console.log("err", err);
          });
      };
    },
    onUploadAvatart(avatar) {
      updateProfile({
        nickName: this.userInfo.nickName,
        avatar,
      }).then((res) => {
        this.$u.toast("修改成功");
        console.log('用户昵称',this.userInfo.nickName)
        this.userInfo.avatar = avatar;
        this.showPic = false;
        uni.setStorageSync("userInfo", JSON.stringify(this.userInfo));
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common");

.content {
  background: #f7f8ff;
  padding: 32rpx;
  min-height: 100%;
  .setting-item {
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    padding: 32rpx;
    height: 112rpx;
    .icon {
      width: 48rpx;
      height: 48rpx;
      margin-right: 16rpx;
    }
    .right-icon {
      font-weight: bold;
      margin-left: 16rpx;
    }
  }
}
.f-content {
  .f-item {
    height: 112rpx;
    text-align: center;
    border-bottom: 1px solid #f1f1f1;
    &:nth-child(1) {
      border-radius: 32px 32px 0px 0px;
    }
  }
  .preview {
    border-bottom: 8rpx solid #f1f1f1;
  }
}
</style>
